<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
	#box{width: 400px; height: 50px;border: 1px solid #333; position: relative;top: 300px;left:0;margin: 0 auto}
	ul{margin:0; padding: 0; list-style: none;width: 400px;height: 50px}
	li{width:50px; line-height: 50px;text-align: center; opacity: 1; position: absolute;top:0;left: 0;z-index: 1}
	#div1{background-color: purple; width:0; height:50px;position: absolute;top: 0;opacity: 1;z-index: 2}
</style>
<script type="text/javascript">
window.onload = function (){
	var oBox = document.getElementById('box');
	var aLi = document.getElementsByTagName('li');
	var oDiv = document.getElementById('div1');
	var timer = null;
	var finished = true;

	for (var i = 0; i < aLi.length; i++) {
		aLi[i].style.left = i*50 +'px';
	};

	//上浮 + 透明（外面的定时器控制num的增加，里面两个并列的定时器（函数），一个控制上浮，一个控制透明）
	oBox.onclick = function (){
		if (!finished)  return;
		finished = false;

		var num = 0;
		var a = 0;
		var b = 0;


		clearInterval(timer);
		timer = setInterval(function (){
			//背景出现
			/*doMove(oDiv, 'width', 10, 400, 24, function (){

			});*/
			doMove(oDiv, 'width', 10, 400, 24);

			//上浮
			/*doMove(aLi[num],'top',20,-200, 80, function (){
				//alert('第'+ a +'个Li到达终点!')
				a++;	//a并不会无限增长
				if (a == aLi.length) {

				};
			});*/
			doMove(aLi[num],'top',20,-200, 80,function (){
				
			});

			//字体逐渐消失 + 还原所有
			opacity( aLi[num], 0.1, 0, 60, function(){
				//alert('第'+ b +'个Li完成隐身!')
				b++;
				if (b == aLi.length) {
					//alert('这个时候我们可以开始还原所有了！')
					setTimeout(function (){
						oDiv.style.width = 0;
						oDiv.style.opacity = 1;
						for (var i = 0; i < aLi.length; i++) {
							aLi[i].style.top = 0;
							aLi[i].style.opacity = 1;
						};
						finished = true;
					},700)
				};
			})

			//背景逐渐消失
			num ++;
			if (num == aLi.length) {
				//alert('第'+ num +'个Li要开始出发了!')
				//alert('这个时候开始把oDiv渐渐变变透明吧！')
				clearInterval(timer);
				opacity(oDiv, 0.1, 0 ,100);
			};
		},200)
	}
}
//华丽的分割线
function getStyle(obj, attr){
	return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
}

function doMove(obj,attr,dir,target, frequency, endFn){
	clearInterval(obj.timer);
	dir = parseInt( getStyle( obj, attr ) ) < target ? dir : -dir;

	obj.timer = setInterval(function () {
		var speed = parseInt( getStyle( obj, attr ) ) + dir;
		if ( speed > target && dir > 0 || speed < target && dir < 0 ) {
			speed = target;
		};
		obj.style[attr] = speed + 'px';
		if (speed == target) {
			clearInterval(obj.timer);
			endFn && endFn();
		};
	},frequency)
}

function opacity(obj,dir,target, frequency,endFn){
	clearInterval(obj.opa);
	dir = parseFloat( getStyle( obj, 'opacity' ) ) < target ? dir : -dir;

	obj.opa = setInterval(function () {
		var speed = parseFloat( getStyle( obj, 'opacity' ) ) + dir;
		if ( speed > target && dir > 0 || speed < target && dir < 0 ) {
			speed = target;
		};
		obj.style.opacity = speed;				//等同于obj.style['opacity'] = speed【内有引号】
		obj.style.filter = 'alpha(opacity= '+ speed +')';
		if (speed == target) {
			clearInterval(obj.opa);
			endFn && endFn();
		};
	},frequency)
}
</script>
</head>
<body>
	<div id="box">
		<div id="div1">
			<ul>
				<li>+1</li>
				<li>+1</li>
				<li>+1</li>
				<li>+1</li>
				<li>+1</li>
				<li>+1</li>
				<li>+1</li>
				<li>+1</li>
			</ul>
		</div>
	</div>
</body>
</html>